<!--分页-->
<template>
  <el-pagination
    layout="total, prev, pager, next, sizes"
    :current-page.sync="page.page"
    :page-size.sync="page.size"
    style="margin-top: 8px;"
    class="his-pagination"
    :total="page.total"
    :page-sizes="sizes"
    background
    @size-change="crud.sizeChangeHandler($event)"
    @current-change="crud.pageChangeHandler"
  />
</template>

<script>
import { pagination } from '@crud/crud'
import { mapGetters } from 'vuex'

export default {
  mixins: [pagination()],
  computed: {
    ...mapGetters(['sizes'])
  }
}
</script>

<style lang="scss" scoped>
.his-pagination {
  &.is-background {
    /deep/ .el-pager {
      li {
        border: 1px solid rgba(0,0,0,0.15);
        background-color: #FFF;
        border-radius: 2px;
        font-weight: 400;
        font-size: 12px;
        color: #000;

        &.active {
          &:not(.disabled) {
            border: 1px solid #1890FF;
            background: #FFF;
            color: #1890FF;
          }
        }
      }
    }

    /deep/ .btn-next,
    /deep/ .btn-prev {
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: #FFF;
      border-radius: 2px;

      &:disabled {
        color: rgba(0,0,0,0.5);
        opacity: 0.5;
      }
    }
  }
}
</style>
